<template>
    <transition @after-leave="afterLeave" name="fade">
        <div class="loading-bg" v-show="show">
            <SvgLoading class="loading-bg__svg"></SvgLoading>
        </div>
    </transition>
</template>

<script>
import SvgLoading from '@/components/Svg-Loading'
export default {
    name: 'LoadingBg',
    data: function() {	
        return {
           
        }
    },
    methods: {
        afterLeave () {
            this.$emit('update:state', false);
        }
    },
    computed: {
        show () {
            return this.state;
        }
    },
    props: ['state'],
    components: {
        SvgLoading
    }
}
</script>

<style lang="scss" scoped>
    .loading-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1100;
        background-color: rgba(255,255,255,.5); 
        display: flex;
        align-items: center;
        justify-content: center;

        &__svg {
            width: .6rem;
            height: .6rem;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .2s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        opacity: 0;
    }
</style>